<template>
  <div class="app-container">
    <div slot="header" class="clearfix" style="margin: 10px 0 20px 0">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="toAddEdit(user_type)"
        v-permission="['ready@save']"
        >{{ $t("common.common18") }}</el-button
      >
      <!-- 新建 -->
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      border
      highlight-current-row
      v-permission="['ready@index']"
      :max-height="$store.state.app.tableHeight"
    >
      <el-table-column prop="id" min-width="80" fixed="left" label="ID" />
      <!-- 排序 -->
      <el-table-column
        header-align="center"
        align="center"
        minWidth="100"
        :label="$t('openPreparation.openPreparation2')"
        class-name="allow"
        v-if="checkPermission(['ready@sort'])"
      >
        <template>
          <svg
            t="1590655187853"
            class="icon"
            viewBox="0 0 1303 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2790"
            width="16"
            height="16"
          >
            <path
              d="M0 0h1303.272727v93.090909H0zM0 465.454545h1303.272727v93.09091H0zM0 930.909091h1303.272727v93.090909H0z"
              p-id="2791"
            />
          </svg>
        </template>
      </el-table-column>
      <!-- 位置 -->
      <el-table-column
        prop="type"
        min-width="100"
        :label="$t('openPreparation.openPreparation1')"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.type | release(cardMode) }}</span>
        </template>
      </el-table-column>
      <!-- 图标 -->
      <el-table-column
        prop="picUrl"
        min-width="80"
        :label="$t('openPreparation.openPreparation3')"
        class-name="imageTable"
      >
        <template slot-scope="scope">
          <el-image
            style="width: 30%"
            :src="scope.row.pic"
            :preview-src-list="[scope.row.pic]"
          >
          </el-image>
        </template>
      </el-table-column>
      <!-- 开户所需 -->
      <el-table-column
        prop="name"
        min-width="130"
        :label="$t('openPreparation.openPreparation4')"
      >
        <template slot-scope="scope">
          <span>{{ scope.row["name_" + $store.state.settings.langTail] }}</span>
        </template>
      </el-table-column>
      <!-- 备注 -->
      <el-table-column
        prop="remark"
        min-width="250"
        :label="$t('openCheck.openCheck6')"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row["remark_" + $store.state.settings.langTail]
          }}</span>
        </template>
      </el-table-column>
      <!-- 创建时间 -->
      <el-table-column
        prop="created_at"
        min-width="200"
        :label="$t('vip.vip4')"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.created_at) }}</span>
        </template>
      </el-table-column>
      <!-- 更新时间 -->
      <el-table-column
        prop="updated_at"
        min-width="200"
        :label="$t('openPreparation.openPreparation5')"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updated_at) }}</span>
        </template>
      </el-table-column>
      <!-- 状态 -->
      <el-table-column
        prop="status"
        min-width="100"
        :label="$t('common.common19')"
      >
        <template slot-scope="scope">
          <div
            class="switch"
            @click="
              switchClick(scope.row, checkPermission(['ready@switchStatus']))
            "
            :class="checkPermission(['ready@switchStatus']) ? '' : 'disabled'"
          >
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="2"
              disabled
            >
            </el-switch>
          </div>
        </template>
      </el-table-column>
      <!--   操作   -->
      <el-table-column
        :label="$t('common.common3')"
        min-width="120px"
        align="center"
        fixed="right"
        class-name="iconBtn"
        v-if="checkPermission(['ready@read', 'ready@delete'])"
      >
        <template slot-scope="scope">
          <span
            @click="toAddEdit(user_type, scope.row.id)"
            v-permission="['ready@read']"
          >
            <!-- 编辑 -->
            <btn-tip
              :content="$t('common.common20')"
              type="primary"
              icon="el-icon-edit"
            ></btn-tip>
          </span>
          <span @click="delList(scope.row.id)" v-permission="['ready@delete']">
            <!-- 删除 -->
            <btn-tip
              :content="$t('common.common9')"
              type="danger"
              icon="el-icon-delete"
            ></btn-tip>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination
      v-permission="['ready@index']"
      :total="tableShow.listCount"
      :page.sync="tableShow.currentPage"
      :page-size.sync="tableShow.pageSize"
      @pageChange="getList"
    />
    <!--表单渲染-->
    <add-edit ref="add_edit" />
  </div>
</template>

<script>
import AddEdit from "./add_edit";
import { parseTime } from "@/utils/index";
import {
  getCusList,
  ChangeSwitch,
  ChangeSort,
  deleteItem,
} from "@/api/systems/openPreparation";
import { cardMode } from "@/assets/js/common";
import Sortable from "sortablejs";

export default {
  components: {
    AddEdit,
    Sortable,
  },
  props: {
    user_type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      cardMode,
      loading: false,
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0,
      },
      tableData: [],
    };
  },
  mounted() {
    this.getList();
    this.rowDrop();
  },
  methods: {
    parseTime,
    // 行拖拽
    rowDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      Sortable.create(tbody, {
        handle: ".allow",
        onEnd: ({ newIndex, oldIndex }) => {
          ChangeSort(this.tableData[oldIndex].id, {
            sort: this.tableData[newIndex].sort,
          })
            .then((res) => {
              if (res.code == 10000) {
                this.tableData = [];
                this.getList();
              } else {
                this.$message.error(res.message);
              }
            })
            .catch((error) => {
              this.$message.error(error.Error);
            });
        },
      });
    },
    getList() {
      this.loading = true;
      getCusList({
        type: this.user_type,
        page: this.tableShow.currentPage,
        limit: this.tableShow.pageSize,
      })
        .then((res) => {
          if (res.code == 10000) {
            this.tableData = res.data;
            this.loading = false;
            this.tableShow.listCount = res.count;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error(error.Error);
        });
    },
    toQuery() {
      this.tableShow.currentPage = 1;
      this.getList();
    },
    switchClick(row, disabled) {
      // 暂无修改权限!
      if (!disabled) {
        this.$message({
          showClose: true,
          message: this.$t("common.common21"),
          type: "warning",
        });
        return false;
      }
      // var statusTitle = row.status == 1 ? "禁用" : "启用";
      var statusTitle =
        row.status == 1
          ? this.$t("common.common22")
          : this.$t("common.common23");
      // 是否
      this.$confirm(this.$t("common.common25") + statusTitle, statusTitle, {
        confirmButtonText: this.$t("common.common2"),
        cancelButtonText: this.$t("common.common1"),
        type: row.status == 1 ? "warning" : "success",
      })
        .then(() => {
          ChangeSwitch(row.id).then((res) => {
            if (res.code == 10000) {
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            // 已取消
            message: this.$t("common.common24"),
          });
        });
    },
    delList(id) {
      var userIds = id
        ? [id]
        : this.dataListSelections.map((item) => {
            return item.id;
          });
      this.$confirm(
        // `确定对[id=${userIds.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        // "确定删除？",
        `${this.$t("common.common13")}[id=${userIds.join(",")}]${this.$t(
          "common.common14"
        )}[${
          id ? this.$t("common.common9") : this.$t("common.common12")
        }]${this.$t("common.common15")}?`,
        this.$t("common.common10"),
        {
          confirmButtonText: this.$t("common.common2"),
          cancelButtonText: this.$t("common.common1"),
          type: "warning",
        }
      )
        .then(() => {
          deleteItem(userIds.join(",")).then((res) => {
            if (res.code == 10000) {
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            // 已取消删除
            message: this.$t("common.common11"),
          });
        });
    },
    toAddEdit(type, rowID) {
      this.$refs.add_edit.init(type, rowID);
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>